<div id="invite-user">
  <h4>Invite another user to AppFlowy</h4>
  <form hx-post="/web-api/invite" hx-target="#none">
    <table>
      <tr>
        <td>Email:</td>
        <td>
          <input
            class="input"
            name="email"
            placeholder="myfriend@example.com"
            required
          />
        </td>
      </tr>
      <tr>
        <td></td>
        <td style="text-align: right">
          <button class="button cyan" type="submit">Invite</button>
        </td>
      </tr>
    </table>
  </form>

  <br />
  <h4>Workspaces shared with you</h4>
  <div
    hx-get="/web/components/user/shared-workspaces"
    hx-trigger="workspaceInvitationAccepted from:body"
    hx-swap="innerHTML"
  >
    {% include "shared_workspaces.html" %}
  </div>

  <br />
  <h4>Invite another user to your workspace</h4>
  <table class="red-table table">
  <thead>
    <tr>
      <th>Workspace Name</th>
      <th>Members</th>
      <th>Invite</th>
    </tr>
  </thead>
  {% for owned_workspace in owned_workspaces %}
    <tr>
      <td> {{ owned_workspace.workspace.workspace_name|escape }} </td>
      <td>
        {% for member in owned_workspace.members %}
          {{ member.email|escape }} <br />
        {% endfor %}
      </td>
      <td>
        <form hx-post="/web-api/workspace/{{ owned_workspace.workspace.workspace_id|escape }}/invite" hx-target="#none">
          <input
            class="input"
            name="email"
            placeholder="user1_email@example.com"
            required
          />
          <button class="button cyan" type="submit">Invite</button>
        </form>
      </td>
    </tr>
  {% endfor %}
  </table>

  <br />
  <h4>Pending Invitation</h4>
  <table class="purple-table table">
  <thead>
    <tr>
      <th>Workspace Name</th>
      <th>Inviter</th>
      <th>Action</th>
    </tr>
  </thead>
  {% for pending_workspace_invitation in pending_workspace_invitations %}
    <tr>
      <td> {{ pending_workspace_invitation.workspace_name|default("")|escape }} </td>
      <td> {{ pending_workspace_invitation.inviter_email|default("")|escape }} </td>
      <td>
        <form
          hx-post="/web-api/invite/{{ pending_workspace_invitation.invite_id|escape }}/accept"
          hx-target="closest tr"
          hx-swap="delete"
        >
          <button class="button cyan" type="submit">Accept</button>
        </form>
      </td>
    </tr>
  {% endfor %}
  </table>

</div>
